<template>
  <uni-popup ref="popupRef" type="center" background-color="transparent">
    <view class="recharge-modal">
      <view class="modal-header">
        <text class="modal-title">充值备用金</text>
        <uni-icons
          type="closeempty"
          size="20"
          color="#666"
          @click="close"
        ></uni-icons>
      </view>
      <view class="modal-content">
        <input
          v-model="rechargeAmount"
          class="amount-input"
          type="digit"
          placeholder="输入充值额"
        />
        <view class="tip-text">
          <text>备用金专用于金额不足退款，如需退还备用金可直接联系平台</text>
        </view>
      </view>
      <view class="modal-footer">
        <view class="footer-btn btn-cancel" @click="close">
          <text>取消</text>
        </view>
        <view class="footer-btn btn-confirm" @click="handleConfirm">
          <text>充值</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from "vue";

// Emits
const emit = defineEmits(["confirm"]);

// 弹窗引用
const popupRef = ref(null);

// 充值金额
const rechargeAmount = ref("");

// 打开弹窗
const open = () => {
  rechargeAmount.value = "";
  popupRef.value.open();
};

// 关闭弹窗
const close = () => {
  popupRef.value.close();
};

// 确认充值
const handleConfirm = () => {
  if (!rechargeAmount.value || parseFloat(rechargeAmount.value) <= 0) {
    uni.showToast({
      title: "请输入有效金额",
      icon: "none",
    });
    return;
  }

  emit("confirm", parseFloat(rechargeAmount.value));
  close();
};

// 暴露方法
defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
.recharge-modal {
  width: 600rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.modal-content {
  padding: 40rpx;
}

.amount-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  border: 1rpx solid transparent;

  &:focus {
    border-color: #ffb200;
    background-color: #fff;
  }
}

.tip-text {
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #ff4d4f;
  line-height: 1.6;
}

.link-text {
  color: #ffb200;
  text-decoration: underline;
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #f0f0f0;
}

.footer-btn {
  flex: 1;
  padding: 28rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;

  &:active {
    opacity: 0.8;
  }
}

.btn-cancel {
  border-right: 1rpx solid #f0f0f0;
  color: #666;
}

.btn-confirm {
  color: #ffb200;
}
</style>
